<template>
  <div id="user">
    <el-breadcrumb separator=">">
      <el-breadcrumb-item :to="{ path: '/' }">系统首页</el-breadcrumb-item>
      <el-breadcrumb-item><b>用户管理</b></el-breadcrumb-item>
    </el-breadcrumb>
    <!--上传界面-->
    <el-dialog title="新增用户信息" :visible.sync="userAddFormVisible" width="35%">
      <el-form :model="userAddForm" label-width="170px" :rules="userAddFormRules" ref="userAddForm">
        <el-form-item label="用户名" prop="UserName">
          <el-input v-model="userAddForm.UserName" auto-complete="off" style="width:217px;"></el-input>
        </el-form-item>
        <el-form-item label="真实姓名" prop="TrueName">
          <el-input v-model="userAddForm.TrueName" auto-complete="off" style="width:217px;"></el-input>
        </el-form-item>
        <el-form-item label="所属（主管）部门" prop="UnitName">
          <el-select v-model="userAddForm.UnitName" multiple placeholder="请选择部门" filterable>
            <el-option v-for="(item,index) in deptoptions" :key="index" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="职务" prop="ZhiWu">
          <el-input v-model="userAddForm.ZhiWu" auto-complete="off" style="width:217px;"></el-input>
        </el-form-item>
        <el-form-item label="角色" prop="RoleName">
          <el-select v-model="userAddForm.RoleName" placeholder="请选择角色" filterable>
            <el-option v-for="(item,index) in roleoptions" :key="index" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="userAddFormVisible = false">取消</el-button>
        <el-button type="primary" @click.native="userAddFormSubmit" :loading="userAddFormLoading">新增</el-button>
      </div>
    </el-dialog>
    <!--修改界面-->
    <el-dialog title="修改用户信息" :visible.sync="userEditFormVisible" width="35%">
      <el-form :model="userEditForm" label-width="170px" :rules="userAddFormRules" ref="userEditForm">
        <el-form-item label="用户名" prop="UserName">
          {{userEditForm.UserName}}
          <el-input v-model="userEditForm.UserName" auto-complete="off" style="display:none"></el-input>
        </el-form-item>
        <el-form-item label="真实姓名" prop="TrueName">
          <el-input v-model="userEditForm.TrueName" auto-complete="off" style="width:217px;"></el-input>
        </el-form-item>
        <el-form-item label="所属（主管）部门" prop="UnitName">
          <el-select v-model="userEditForm.UnitName" multiple placeholder="请选择部门" filterable>
            <el-option v-for="(item,index) in deptoptions" :key="index" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="职务" prop="ZhiWu">
          <el-input v-model="userEditForm.ZhiWu" auto-complete="off" style="width:217px;"></el-input>
        </el-form-item>
        <el-form-item label="角色" prop="RoleName">
          <el-select v-model="userEditForm.RoleName" placeholder="请选择角色" filterable>
            <el-option v-for="(item,index) in roleoptions" :key="index" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="userEditFormVisible = false">取消</el-button>
        <el-button type="primary" @click.native="userEditFormSubmit" :loading="userEditFormLoading">修改</el-button>
      </div>
    </el-dialog>
    <section class="wboxd">
      <!--列表-->
      <el-table :data="users" highlight-current-row v-loading="listLoading" style="width: 100%;" @sort-change='sortChange' :height="tableHeight">
        <el-table-column type="index" label=" " width="50" fixed align="center" class-name="tableth">
        </el-table-column>
        <el-table-column prop="UserName" label="用户名" width="200" fixed>
        </el-table-column>
        <el-table-column prop="TrueName" label="真实姓名" width="100">
        </el-table-column>
        <el-table-column prop="UnitName" label="所属（主管）部门" width="300">
        </el-table-column>
        <el-table-column prop="ZhiWu" label="职务" width="150">
        </el-table-column>
        <el-table-column prop="RoleName2" label="权限">
        </el-table-column>
        <el-table-column label="操作" width="200">
          <template slot-scope="scope">
            <el-button size="small" @click="userEdit(scope.row.UserName)" type="text" icon="el-icon-edit">修改</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-button type="primary" @click="userAdd" style="margin:10px" icon="el-icon-user">新增用户</el-button>
    </section>
  </div>
</template>

<script>
export default {
  data () {
    return {
      userAddFormVisible: false, // 编辑界面是否显示
      userAddFormLoading: false,
      userAddFormRules: {
        UserName: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        TrueName: [
          { required: true, message: '请输入真实姓名', trigger: 'blur' }
        ],
        UnitName: [
          { required: true, message: '请选择部门', trigger: 'blur' }
        ],
        RoleName: [
          { required: true, message: '请选择角色', trigger: 'blur' }
        ]
      },
      // 编辑界面数据
      userAddForm: {
        UserName: '',
        TrueName: '',
        UnitName: [],
        RoleName: ''
      },
      userEditFormVisible: false, // 编辑界面是否显示
      userEditFormLoading: false,
      // 编辑界面数据
      userEditForm: {
        UserName: '',
        TrueName: '',
        UnitName: [],
        RoleName: ''
      },
      roleoptions: [],
      deptoptions: [],
      users: [],
      listLoading: false,
      totalnum: 0,
      Isace: true,
      Sortkey: '',
      tableHeight: 100
    }
  },
  methods: {
    getDics () {
      let para = {
        id: this.$route.params.id
      }
      var _this = this
      this.minzuLoading = true
      this.$http
        .post(`/account/dics`)
        .then(function (response) {
          console.log(para)
          _this.minzuLoading = false
          if (response.data.IsSuccess === true) {
            console.log('获取成功')
            _this.roleoptions = response.data.Result.Roles
            _this.deptoptions = response.data.Result.Bumen
          } else {
            console.log('获取失败:' + response.data.Msg)
            _this.$message({
              message: '获取失败:' + response.data.Msg,
              type: 'error'
            })
          }
        })
        .catch(function (error) {
          console.log(error)
          _this.$message({
            message: '网络获取失败:' + error,
            type: 'error'
          })
        })
    },
    handleCurrentChange (val) {
      this.page = val
      this.getUsers()
    },
    // 排序
    sortChange: function (column, prop, order) {
      this.Sortkey = column.prop
      if (column.order === 'ascending') {
        this.Isace = true
      } else {
        this.Isace = false
      }
      this.getUsers()
    },
    userAdd: function () {
      this.userAddFormVisible = true
      console.log('显示新增界面:' + this.userAddFormVisible)
      if (this.$refs['userAddForm']) {
        this.$refs['userAddForm'].resetFields()
      }
    },
    // 显示编辑界面
    userEdit: function (username) {
      this.userEditFormVisible = true
      this.$nextTick(() => {
        this.$refs['userEditForm'].resetFields()
        console.log('跟踪用户名参数' + username)
        for (let i = 0; i < this.users.length; i++) {
          if (this.users[i].UserName === username) {
            let objData = Object.assign({}, this.users[i])
            this.userEditForm = objData
            break
          }
        }
      })
    },
    // 获取用户列表
    getUsers () {
      this.listLoading = true
      let para = {
        Sortkey: this.Sortkey,
        Isace: this.Isace
      }
      // var personParams = { Page: 0, Pagenum: 20, Personname: '', Unitkey: '', Sortkey: '', Isace: true, timestamp: new Date().getTime() }
      this.$http
        .post(`/account/userlist`, para)
        .then((response) => {
          this.listLoading = false
          if (response.data.IsSuccess === true) {
            console.log('获取成功')
            this.users = response.data.Result
            console.log('获取总数:' + response.data.Msg)
            console.log('获取size:' + this.pagenum)
            this.totalnum = parseInt(response.data.Msg)
          } else {
            console.log('获取失败:' + response.data.Msg)
            this.$message({
              message: '获取失败:' + response.data.Msg,
              type: 'error'
            })
          }
        })
        .catch((error) => {
          console.log(error)
          this.$message({
            message: '网络获取失败:' + error,
            type: 'error'
          })
        })
    },
    // 编辑
    userEditFormSubmit: function () {
      var _this = this
      this.$refs.userEditForm.validate((valid) => {
        if (valid) {
          _this.userEditFormLoading = true
          let para = {
            UserName: this.userEditForm.UserName,
            TrueName: this.userEditForm.TrueName,
            UnitName: this.userEditForm.UnitName,
            ZhiWu: this.userEditForm.ZhiWu,
            RoleName: this.userEditForm.RoleName
          }
          this.$http.post(`/account/edituser`, para).then(function (response) {
            console.log(response.data.IsSuccess)
            if (response.data.IsSuccess === true) {
              _this.userEditFormLoading = false
              _this.$message({
                message: '修改成功',
                type: 'success'
              })
              _this.$refs['userEditForm'].resetFields()
              _this.userEditFormVisible = false
            } else {
              _this.userEditFormLoading = false
              console.log('修改失败:' + response.data.Msg)
              _this.$message({
                message: '修改失败:' + response.data.Msg,
                type: 'error'
              })
            }
            _this.getUsers()
          }).catch(function (error) {
            _this.userEditFormLoading = false
            console.log(error)
            _this.$message({
              message: '获取失败:' + error,
              type: 'error'
            })
          })
        }
      })
    },
    // 新增
    userAddFormSubmit: function () {
      var _this = this
      this.$refs.userAddForm.validate((valid) => {
        if (valid) {
          _this.userAddFormLoading = true
          let para = {
            UserName: this.userAddForm.UserName,
            TrueName: this.userAddForm.TrueName,
            UnitName: this.userAddForm.UnitName,
            RoleName: this.userAddForm.RoleName,
            ZhiWu: this.userAddForm.ZhiWu
          }
          this.$http.post(`/account/adduser`, para).then(function (response) {
            console.log(response.data.IsSuccess)
            if (response.data.IsSuccess === true) {
              _this.$message({
                message: '提交成功',
                type: 'success'
              })
              _this.$refs['userAddForm'].resetFields()
              _this.userAddFormVisible = false
              _this.userAddFormLoading = false
              _this.getUsers()
            } else {
              console.log('提交失败:' + response.data.Msg)
              _this.$message({
                message: '提交失败:' + response.data.Msg,
                type: 'error'
              })
              _this.userAddFormLoading = false
            }
          }).catch(function (error) {
            console.log(error)
            _this.$message({
              message: '获取失败:' + error,
              type: 'error'
            })
            _this.userAddFormLoading = false
          })
        }
      })
    },
    tableresize (obj) {
      var clientHeight = 0
      if (document.body.clientHeight && document.documentElement.clientHeight) {
        clientHeight = (document.body.clientHeight < document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight
      } else {
        clientHeight = (document.body.clientHeight > document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight
      }
      obj.$nextTick(function () {
        obj.tableHeight = clientHeight - 219
      })
    }
  },
  mounted () {
    this.getUsers()
    this.getDics()
    this.tableresize(this)
    let _this = this
    window.onresize = function windowResize () {
      // 通过捕获系统的onresize事件触发我们需要执行的事件
      _this.tableresize(_this)
    }
  }
}
</script>
<style>
  .wboxd .el-table th{
    font-weight: normal;
    background-image: linear-gradient(to bottom , #f8f8f8, #efefef);
  }
  .wboxd .el-table td, .el-table th{
    padding:0;
    font-size:var(--size14) !important;
    line-height: 20px;
    font-family: '宋体'
  }
  .tableth{
    background-image: linear-gradient(to bottom , #f8f8f8, #efefef);
    height:33px;
  }
  #zhidu .el-form-item{
    font-size:var(--size14) !important;
    font-family: '宋体';
    margin:0 10px 0 0;
  }
  #zhidu .el-form-item__label{
    font-size:var(--size14) !important;
    font-family: '宋体'
  }
  #zhidu .el-input__inner{
    font-size:var(--size14) !important;
    line-height: 20px;
    height:30px;
    padding: 5px;
    border-radius: 0;
  }
  #zhidu .el-button{
    padding: 7px;
    border-radius: 0;
  }
</style>
<style scoped>
  h1{
    font-size:var(--size16) !important;
    font-weight: bolder;
    height: 30px;
    border-bottom: 1px solid #95B8E7;
    font-family: '宋体';
    line-height: 30px;
    color: #000;
    padding-left:10px;
    background-image: linear-gradient(to bottom , #EEF4FF, #E0ECFF);
    margin:0;
  }
  .el-pagination{
    float: left;
    padding:7px 10px;
  }
  .wboxs{
    padding:5px 15px;
    width: calc(100% - 30px);
    background: #fff;
    border: 1px solid #95B8E7;
    margin:0 10px;
    overflow: hidden;
  }
  .wboxd{
    padding:0;
    width: calc(100% - 0px);
    background: #fff;
    border: 1px solid #95B8E7;
    margin:0 10px;
    overflow: hidden;
  }
</style>
